<template>
    <div>
        <div class="top">
            <img :src="user.avatarUrl" alt="">
            <div class="name">
                <div>{{user.nickname}}</div>
            </div>
            <div class="tuichu" @click="tuichu">退出登录</div>
        </div>
        <div class="center">
            <div class="songname">我创建的歌单({{songlistlengt}})</div>
            <div class="resonglistlist">
                <div @click="songlistdata(item.id)" class="imglist"  v-for="(item,index) in songlist" :key = 'item.id'>
                    <img @mouseover='fnshow(index)' @mouseout='hide' :src="item.coverImgUrl" alt="">
                    <div>{{item.name}}</div>
                    <div @mouseover='fnshow(index)' class="imgiii" :class="{active: index === show}">
                        <i class="el-icon-video-play"></i>
                    </div>
                    <div class="playcount">
                        <i class="el-icon-video-play"></i>
                    {{mill(item.playCount)}}</div>
                </div>
            </div>
        </div>
        <div>
            <div>我收藏的歌单</div>
            <div></div>
        </div>
    </div>
</template>

<script>
import http from '@/http/http.js'
import million from '@/unit/numberhalden.js'  //数字过万处理

export default {
    data() {
        return {
            user:{},
            id:this.$route.params.id,
            songlist:[],
            show:100,
            songlistlengt:0

        }
    },

    methods: {
        mill(value){
             return million(value)
        },


        tuichu(){
            this.$store.commit('tuichu')
            this.$router.push('/home')

        },
        //点击歌单跳转到歌单详情
        songlistdata(id){
            console.log(id)
            this.$router.push({
                name:'songlistid',
                params:{
                    id
                }
            })
        },
        fnshow(index){
            // console.log(index)
            this.show = index
        },
        hide(){
            this.show = 100
        }
    },
    mounted() {
            // console.log(this.$route.params.id);

        http({
            url:'/user/detail',
            params:{
                uid:this.id
            }
        }).then(res=>{
            // console.log(res);
            this.user = res.data.profile
        })
        //获取用户歌单
        http({
            url:'/user/playlist',
            params:{
                uid:this.id
            }
        }).then(res=>{
            console.log(res);
            this.songlist = res.data.playlist
            this.songlistlengt = this.songlist.length
        })

        
        console.log(this.$route.params.id)
    },
}
</script>

<style lang="less" scoped>
.tuichu{
    margin-left: 30px;
    border: 1px solid #666;
    border-radius: 30px;
    height: 30px;
    margin-top: 100px;
    padding: 10px;
    cursor: pointer;
    line-height: 30px;
}
.tuichu:hover{
    background-color: pink;
}

.center{
    margin: 0 auto;
    // width: 100%;
    margin-left: 20px;

}
.songname{
    font-size: 20px;
    margin: 20;
    height: 30px;

}      
        .resonglistlist{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            min-width: 1200;
            width: 1200px;
            .imglist{
                
                width: 250px;
                height: 250px;
                padding-bottom: 50px;
                // border-radius: 10px;
                // overflow: hidden;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;

                    
                }
                .imgiii{
                    display: none;
                    position: absolute;
                    font-size: 40px;
                    color: pink;
                    right: 20px;
                    bottom: 60px;
                }
                .playcount{
                    
                    position: absolute;
                    font-size: 12px;
                    
                    color: white;
                    right: 20px;
                    top: 10px;
                    
                }
                .active{
                    display: block;
                }
            }
        }
        .resonglistlist:hover{
            cursor: pointer;
            
        }
    
 
.top{
    display: flex;
    flex-direction: row;
    margin: 20px;
    img{
        margin-top: 20px;
        width: 300px;
        height: 300px;
        border-radius: 300px;
    }
    .name{
        font-size: 50px;
        text-align: center;
        height: 300px;
        line-height: 300px;
        margin-left: 40px;
    }
}
</style>